// /* eslint-disable react/react-in-jsx-scope */
// /* eslint-disable no-undef */
// /* eslint-disable eqeqeq */
// /* eslint-disable array-callback-return */
// /* eslint-disable react/destructuring-assignment */
// /* eslint-disable react/no-unused-state */
// /* eslint-disable import/no-extraneous-dependencies */
// /* eslint-disable no-unused-vars */
import React, { PureComponent } from 'react';
import { Card, Button, Table } from 'antd';
import router from 'umi/router';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
// import styles from '../style.less';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';
import { urlParse } from '@/utils/utils';

const { Description } = DescriptionList;
@connect(({ login }) => ({
  login,
}))
class ClientInfoDetails extends PureComponent {
  state = {
    // loading: true,
    insAccoId: null,
    sysCode: 1,
    entpTypeName: null,
  };

  componentDidMount() {
    const { login, location } = this.props;
    const { insAccoId } = this.state;
    const { systemList } = login;
    const { sysCode } = systemList.filter(item => item.isSelected)[0];
    this.setState({
      sysCode,
    });
    const insAccoIds = urlParse(location.search).insAccoId
      ? urlParse(location.search).insAccoId
      : insAccoId;
    this.detail(insAccoIds);
  }

  closeDetail = () => {
    router.goBack();
  };

  detail = insAccoId => {
    const { dispatch } = this.props;
    dispatch({
      type: 'waresave/fetchDetailInforPage',
      payload: { insAccoId },
    }).then(response => {
      const values = response.data;
      let insArr = '';
      let insPkgArr = '';
      let respListArr = '';
      if (values.insKindsList.length) {
        values.insKindsList.forEach(c => {
          insArr += `${c.insKindName},`;
        });
      }
      insArr = insArr.slice(0, insArr.length - 1);

      if (values.insPkgList.length) {
        values.insPkgList.forEach(c => {
          insPkgArr += `${c.insLsPkgName},`;
        });
      }
      insPkgArr = insPkgArr.slice(0, insPkgArr.length - 1);
      let areaName = '';
      if (values.areaList.length) {
        values.areaList.forEach(value => {
          areaName += `${value.areaName}/`;
        });
      }
      areaName = areaName.slice(0, areaName.length - 1);
      if (values.respList.length) {
        values.respList.forEach(c => {
          respListArr += `${c.respName},`;
        });
      }
      respListArr = respListArr.slice(0, respListArr.length - 1);
      this.setState({
        accoName: values.accoName,
        unitName: values.unitName,
        uniCreditCode: values.uniCreditCode,
        areaName,
        insBur: values.insBur,
        custBankName: values.custBankName,
        custBankId: values.custBankId,
        insKinds: insArr,
        insPkgList: insPkgArr,
        remark: values.remark,
        injRatioList: values.injRatioList,
        respList: respListArr,
        entpTypeName: values.entpTypeName,
      });
    });
  };

  render() {
    const {
      accoName,
      unitName,
      uniCreditCode,
      insBur,
      insKinds,
      areaName,
      insPkgList,
      custBankName,
      custBankId,
      remark,
      respList,
      sysCode,
      injRatioList,
      entpTypeName,
    } = this.state;
    const columns = [
      {
        title: '开始年月',
        dataIndex: 'beginYm',
        key: 'beginYm',
        width: '15%',
        render: text => <span>{text || '--'}</span>,
      },
      {
        title: '企业工伤比例(%)',
        dataIndex: 'ratioVal',
        key: 'ratioVal',
        width: '15%',
      },
    ];
    return (
      <PageHeaderWrapper>
        <Card title="社保大库详情" bordered={false}>
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="大库名称 ">{accoName || '--'}</Description>
            <Description term="公司名称">{unitName || '--'}</Description>
            <Description term="统一社会信用代码">{uniCreditCode || '--'}</Description>
          </DescriptionList>
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="开户地区">{areaName || '--'}</Description>
            <Description term="所属社保机构">{insBur || '--'}</Description>
            <Description term="缴纳险种">{insKinds || '--'}</Description>
          </DescriptionList>
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="社保组合">{insPkgList || '--'}</Description>
            <Description term="开户企业类型">{entpTypeName || '--'}</Description>
            <Description term="开户行">{custBankName || '--'}</Description>
            <Description term="银行账号">{custBankId || '--'}</Description>
          </DescriptionList>
          {Number(sysCode) === 2 ? (
            <DescriptionList style={{ marginBottom: 24 }}>
              <Description term="备注">{remark || '--'}</Description>
            </DescriptionList>
          ) : (
            <DescriptionList style={{ marginBottom: 24 }}>
              <Description term="申报负责人">{respList || '--'}</Description>
              <Description term="备注">{remark || '--'}</Description>
            </DescriptionList>
          )}
        </Card>
        <Card title="企业工伤比例信息" bordered={false}>
          <Table
            columns={columns}
            dataSource={injRatioList}
            style={{ width: '50%' }}
            pagination={false}
          />
        </Card>
        <FooterToolbar>
          <Button type="default" onClick={this.closeDetail}>
            {' 返回 '}
          </Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}

export default ClientInfoDetails;
